$(function () {
  /* 
  1 显示mui的下拉刷新组件
  2 在下拉的callback里面 开始发送请求加载渲染数据 
    1 发送请求加载渲染数据 -接口。。。。
      全局变量！！ 方便修改和维护
      query	查询关键词	
      cid	分类ID	可选
      pagenum	页数索引	可选默认第一页
      pagesize	每页长度	可选默认20条
    2 数据渲染成功了  结束mui的下拉刷新组件
  3 思考代码结构- 优化结构
    0 第一次显示页面的时候
        $(".goods_wrap").html(html);
        结束下拉刷新
    1  加载下一页
        $(".goods_wrap").append(html);  
        结束上拉加载下一页组件 
  4 加载下一页
    0 pagenum 当前的页面 总的页面 totalPage (有总的条数)
      页面的容量 pagesize
      总的条数 total 
      来计算总的页数 
        total = 21
        pagesize=10 

          21 / 10 =2.1 =>3 
        totalPage=  Math.ceil(total/pagesize)
    1.5 什么时候开始触发 加载下一页的逻辑
        通过使用mui的组件 手势的动作 上拉就触发了
    1 先判断有没有下一页的数据 
      pagenum>=totalPage
    2 有 直接加载下一页
    3 没有  不管，，，给出提示。。
  5 默认情况下 
    在mui的下拉刷新和上拉加载组件中 a标签点击是没有跳转。。
    为什么？
      1 mui作用 同时去编写移动web和混合app-软件 
        在混合app中 直接通过a标签跳转 体验不少
            有更加好看的跳转效果 
      2 专门的移动web 只能通过a标签去跳转。。。 
    如何去解决？
      1 去查看源代码 自己去修改 -- 不建议！！1
      1.5 把a标签当成一个普通的标签
        1 绑定点击事件
        2 获取a标签的属性 href 里面的值
        3 通过js来跳转。 ！！
      2 通过js的方式去跳转！！！！
        location.href=.....


   */


  // 查询参数
  var QueryObj = {
    query: "",
    cid: $.getValue("cid"),
    pagenum: 1,
    pagesize: 10
  };

  // 总页数 在请求成功之后重新赋值
  var totalPage = 1;

  init();

  function eventList() {
    // 通过委托的方式来绑定
    $(".goods_wrap").on("tap","a",function () {
      location.href=this.href;
      
    })
    
  }

  function init() {
    // mui下拉刷新组件
    mui.init({
      pullRefresh: {
        container: ".pyg_main",
        down: {
          auto: true,
          //  触发下拉刷新时自动触发
          callback: function () {

            // 重置索引
            QueryObj.pagenum = 1;
            // 重置组件 没有成功。。 
            // 代码没有错的 调用的位置有错！！！
            // 这个解决方案 我是去扣代码 去找的。。。去hello-mui里面找 
            // mui('.pyg_main').pullRefresh().refresh(true);

            getGoods(function (html) {
              // // 第一次加载的时候可以写html 但是加载第二页或者。。 append
              $(".goods_wrap").html(html);
              // // 结束下拉刷新   加载上一页的时候 要结束的是 上拉刷新组件。。。
              mui('.pyg_main').pullRefresh().endPulldownToRefresh();


              //  这个解决方案 我是去扣代码 去找的。。。去hello-mui里面找 
              mui('.pyg_main').pullRefresh().refresh(true);
            });

          }
        },
        up: {
          //  触发上拉刷新时自动触发
          callback: function () {
            /* 
            1 先判断有没有下一页的数据 
              pagenum>=totalPage
            2 没有    
                给出一个提示。。
            3 有 直接加载下一页
              pagenum++；
              开始加载下一页的数据
                getGoods() => 加载成功了
                  1 append 
                  2 结束上拉加载组件
             */

            //  判断有没有下一页的数据
            if (QueryObj.pagenum >= totalPage) {
              // 没下一页
              console.log("不要再乱拉， 没有数据了！！1");
              mui('.pyg_main').pullRefresh().endPullupToRefresh(true);
            } else {
              // 有下一页
              QueryObj.pagenum++;
              getGoods(function (html) {
                $(".goods_wrap").append(html);
                // // 结束下拉刷新   加载上一页的时候 要结束的是 上拉刷新组件。。。
                // 结束上拉加载更多 如果没有数据 传入 true 否则 传入 false
                mui('.pyg_main').pullRefresh().endPullupToRefresh(false);
              });
            }

          }
        }
      }
    });

    eventList();
  }

  // 发送请求获取数据
  function getGoods(cb) {
    $.get("goods/search", QueryObj, function (ret) {

      // 判断请求是否成功
      if (ret.meta.status == 200) {
        // 计算总的页数
        totalPage = Math.ceil(ret.data.total / QueryObj.pagesize);
        // console.log(totalPage);
        var html = template("mainTpl", {
          data: ret.data.goods
        });

        // 执行逻辑由调用 getGoods  这方方法的地方来决定
        cb(html);
        // // 第一次加载的时候可以写html 但是加载第二页或者。。 append
        // $(".goods_wrap").html(html);

        // // 结束下拉刷新   加载上一页的时候 要结束的是 上拉刷新组件。。。
        // mui('.pyg_main').pullRefresh().endPulldownToRefresh();
      }

    })

  }


})